<template>
    <div class="p-2">
      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
        <div class="mb-[10px]" v-show="showSearch">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams"   :inline="true" label-width="110px" label-suffix=":">
              <el-form-item label="创建时间" >
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="运营商名称" >
                <el-input  v-model="queryParams.params.op_name" placeholder="请输入运营商名称" clearable style="width: 240px"  />
              </el-form-item>
              <el-form-item label="审核状态" >
                <el-select v-model="queryParams.verifyStatus"  placeholder="请选择审核状态" clearable style="width: 240px">
                  <el-option v-for="dict in cashout_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery" icon="Search"  >搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
  
        </div>
      </transition>
  
  
  
      <el-card shadow="hover">
        <el-table ref="roleTableRef"  v-loading="tableloading"  :data="operList" border >
          <el-table-column label="创建时间" align="center" prop="addTime"  width="180" >
          </el-table-column>
          <el-table-column label="运营商名称" align="center" prop="opName" width="220" />
          <el-table-column label="运营商编号" align="center" prop="opNo" :show-overflow-tooltip="true" width="100" />
          <el-table-column label="服务商名称" align="center" prop="sydName" width="220" />
          <el-table-column label="服务商编号" align="center" prop="sydNo" :show-overflow-tooltip="true" width="100" />
          <el-table-column label="提现金额(元)"  align="center" prop="amount" :show-overflow-tooltip="true" width="100" >
            <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.amount) }}</span>
              </template>
          </el-table-column>
          <el-table-column label="开户银行" align="center" prop="khd" width="150" >
            <!-- <template #default="scope">
                  <span>{{ convertFenToYuan(scope.row.khd) }}</span>
                </template>-->
            </el-table-column>
          <el-table-column label="结算账户" align="center" prop="bankCard" width="150" />
          <el-table-column label="快递公司" align="center" prop="iogisticsCompany" width="150" />
          <el-table-column label="快递编号" align="center" prop="iogisticsNo" width="150" />
          <el-table-column label="发票" align="center" prop="invoicePic" width="150" >
            <template #default="scope">
                <ImagePreview
                  v-if="scope.row.invoicePic"
                  :width="100"
                  :height="100"
                  :src="scope.row.invoicePic"
                  :preview-src-list="[scope.row.invoicePic]"
                />
                <span v-else > -- </span>
              </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" prop="verifyStatus" >
            <template #default="scope">
              <dict-tag :options="cashout_status" :value="scope.row.verifyStatus" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.verifyStatus == 0" style="cursor: pointer;"  @click="perDrawer(scope.row)">审核 </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
      <CheckDialog  ref="txCheckRef" title="提现审核" :id="rowid" :openCheck="openCheck" @dialogClose="checkDialogClose"  @dialogSubmit="checkDialogSubmit"></CheckDialog>
    </div>
  
  </template>
  
  <script  setup name="balance" lang="ts">
  
  import {operatorCashoutList,operatorVerifyCashout} from "@/api/operator/outMag/index";
  import ImagePreview from "@/components/ImagePreview/index.vue";
  import CheckDialog from "@/components/customDialog/cashout/operCheck";
  
    const router = useRouter();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const queryFormRef = ref<ElFormInstance>();
    const tableloading = ref(false)
    const operList = ref([])
    const total = ref(0)
    const rowid = ref(1);
    const queryParams = ref({
      params:{
        begin_time:"",
        end_time:"",
        channel_name:"",
        channel_no:"",
        dw_level:"",
        op_name:"",
        orderByColumn:""
      },
      verifyStatus:"",
      pageSize:10,
      pageNum:1
    });
    const showSearch = ref(true);
    const openCheck = ref(false)
    const dateRange = ref(['', '']);
    const txCheckRef = ref();
    const { cashout_status } = toRefs<any>(proxy?.useDict('cashout_status'));
  
    const checkDialogClose = (params)=>{
      openCheck.value = false;
      // alert(params)
    }
  
    const perDrawer = (row:any)=>{
        rowid.value = row.id;
        openCheck.value = true;
    }
  
    const checkDialogSubmit = (params:any)=>{
      let data ={
         id:params.id,
         verifyStatus:params.checkType,
         verifyReason:params.remarer
      }
      operatorVerifyCashout(data).then(res=>{
          openCheck.value = false;
          getList();
          txCheckRef.value.hideLoad();
      });
    }
  
    const convertFenToYuan = (fen)=>{
      if(!fen){
        return '--';
      }
      return (fen / 100).toFixed(2);
    }
  
    /** 重置按钮操作 */
    const resetQuery = () => {
      dateRange.value = ['', '']
      queryFormRef.value?.resetFields();
      queryParams.value.pageNum = 1;
    }
  
  /**  查询 */
    const handleQuery = ()=>{
      queryParams.value.pageNum = 1;
      queryParams.value.params.begin_time = dateRange.value[0]
      queryParams.value.params.end_time = dateRange.value[1]
      getList();
    }
  
   /**
    * 查询列表
    */
   const getList = () => {
     tableloading.value = true
     operatorCashoutList(queryParams.value).then(res => {
       operList.value = res.rows
       total.value = res.total
       tableloading.value = false
     })
   }
  
  
    onMounted(() => {
      getList();
    });
  
  </script>
  
  <style>
  </style>
  